// pages/duchuntao/unit5/case5-3-3/case5-3-3.js
var ctx = wx.createCanvasContext("myCanvas")
Page({
    clear: function () {
        ctx.draw()
    },
    darwDot: function (e) {
        ctx.arc(200, 200, 10, 0, 2 * Math.PI)
        ctx.setFillStyle("black")
        ctx.fill()
        ctx.draw()
    },
    darwCircle: function () {
        ctx.setFillStyle("black")
        ctx.arc(200, 200, 10, 0, 2 * Math.PI)
        ctx.fill()
        ctx.setStrokeStyle("red")
        ctx.moveTo(300, 200)
        ctx.arc(200, 200, 100, 0, 2 * Math.PI)

        ctx.stroke()
        ctx.draw()
    },
    darwDash: function () {
        ctx.setStrokeStyle("red")
        ctx.setLineDash([20, 10])
        ctx.setLineWidth(10)
        ctx.moveTo(20, 100)
        ctx.lineTo(100, 80)
        ctx.lineTo(150, 0)
        ctx.lineTo(200, 80)
        ctx.lineTo(280, 100)
        ctx.lineTo(200, 150)
        ctx.lineTo(250, 250)
        ctx.lineTo(150, 170)
        ctx.lineTo(60, 250)
        ctx.lineTo(100, 150)
        ctx.lineTo(20, 100)
        ctx.stroke()
        ctx.draw()
        ctx.setLineDash([0, 0])
        ctx.setLineWidth(1)
    },
    drawText: function () {
        ctx.setFillStyle("red")
        ctx.setFontSize(30)
        ctx.setTextBaseline("bottom")
        ctx.fillText("云南大学", 80, 80)
        ctx.setFillStyle("white")
        ctx.setTextBaseline("top")
        ctx.fillText("云南大学", 80, 80)
        ctx.setFillStyle("yellow")
        ctx.rotate(40 * Math.PI / 180)
        ctx.fillText("云南大学", 200, 80)
        ctx.draw()
    },
    circularGrad: function () {
        var grd = ctx.createCircularGradient(175, 175, 125)
        grd.addColorStop(0, "purple")
        grd.addColorStop(1, "white")
        ctx.setFillStyle(grd)
        ctx.fillRect(50, 50, 250, 250)
        ctx.draw()
    },
    shadowRect: function () {
        ctx.setFillStyle("orange")
        ctx.setShadow(20, 20, 50, "yellow")
        ctx.fillRect(50, 50, 250, 250)
        ctx.draw()
    },
    translucent: function () {
        ctx.setFillStyle("red")
        ctx.setGlobalAlpha(0.2)
        ctx.fillRect(50, 50, 250, 250)
        ctx.draw()
        ctx.setGlobalAlpha(1)
    },
    capAndJoin: function () {
        ctx.setStrokeStyle("red")
        ctx.setLineWidth(20)
        ctx.setLineCap("round")
        ctx.setLineJoin("miter")
        ctx.lineTo(100, 80)
        ctx.lineTo(150, 0)
        ctx.lineTo(200, 80)
        ctx.lineTo(280, 100)
        ctx.lineTo(200, 150)
        ctx.lineTo(250, 250)
        ctx.lineTo(150, 170)
        ctx.lineTo(60, 250)
        ctx.lineTo(100, 150)
        ctx.lineTo(20, 100)
        ctx.stroke()
        ctx.draw()
        ctx.setLineWidth(1)
        ctx.setLineCap("butt")
        ctx.setLineJoin("miter")
    },
    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})